<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const selectedFile = ref(null);
const showFlag = ref(false)
const router = useRouter()
const files: any = ref([])
const content = ref('')
const lists: any = ref([])
const lll: any = ref([])
const handleFileChange = (event) => {
    selectedFile.value = event.target.files[0];
    handleUpload()
};
const handleUpload = () => {
    if (!selectedFile.value) return; // 确保有文件被选中

    let file: any
    file = selectedFile.value;
    const fileType = file.type; // 获取文件类型
    const chunkSize = 1024 * 1024; // 切片大小，这里设置为1MB
    const totalChunks = Math.ceil(file.size / chunkSize);
    const chunks = [];
    for (let i = 0; i < totalChunks; i++) {
        const start = i * chunkSize;
        const end = Math.min(start + chunkSize, file.size);
        const chunk = file.slice(start, end);
        chunks.push(chunk);
    }
    uploadChunks(chunks, file.name, fileType);
};
const uploadChunks = (chunks: any, fileName: any, fileType: any) => {
    const totalChunks = chunks.length;
    let uploadedChunks = 0;

    chunks.forEach((chunk: any, index: any) => {
        const formData = new FormData();
        formData.append("file", chunk);
        formData.append("filename", fileName);
        formData.append("fileType", fileType); // 添加文件类型到表单数据
        formData.append("index", index);

        axios
            .post("http://localhost:3000/zhy/upload", formData)
            .then((response) => {
                uploadedChunks++;
                console.log(`Chunk ${index + 1} uploaded successfully`);
                if (uploadedChunks === totalChunks) {
                    mergeChunks(fileName);
                }
            })
            .catch((error) => {
                console.log(123123213);
                console.error(`Error uploading chunk ${index + 1}:`, error);
            });
    });
};
const mergeChunks = (fileName: any) => {
    axios
        .post("http://localhost:3000/zhy/merge", { filename: fileName })
        .then(({ data: { filePath } }) => {
            afterRead(filePath)
        })
        .catch((error) => {
            console.error("Error merging file:", error);
        });
};
let arr = []
const afterRead = (filePath: any) => {
    arr.push(filePath)
    lists.value.push(filePath)
    console.log(lists.value, arr, 'arr');
}

const hide = () => {
    showFlag.value = !showFlag.value
}
const sureBtn = () => {
    showFlag.value = !showFlag.value
    router.push('/home/sports/friends')
}


const add = async () => {
    let { data } = await axios.post('http://localhost:3000/zhy/add', {
        content: content.value,
        files: lists.value
    })
    if (data.code == 200) {
        router.push('/home/sports/friends')
    }
}
</script>

<template>
    <div class="body">
        <div class="header">
            <van-button class="van-hairline-left" @click="hide">取消</van-button>
            <van-button class="van-hairline-right" @click="add">发表</van-button>
        </div>

        <van-overlay :show="showFlag" @click="showFlag = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <p>是否取消发送朋友圈</p>
                    <van-button class="van-button1" @click="showFlag = false">取消</van-button>
                    <van-button class="van-button2" @click="sureBtn">确定</van-button>
                </div>
            </div>
        </van-overlay>
        <div>
            <!-- <input type="file" @change="handleFileChange" /> -->
            <van-field class="field" v-model="content" rows="4" autosize type="textarea" maxlength="200"
                placeholder="这一刻的想法" show-word-limit />
            <br>
            <van-uploader v-model="files" @change="handleFileChange">


            </van-uploader>
        </div>
    </div>


</template>

<style scoped></style>


<style scoped>
.header {
    justify-content: space-between;
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 50px;
}

.body {
    width: 100%;
    position: absolute;
    height: 100%;
    overflow: hidden;
}

.header button {
    width: 60px;
    height: 30px;
}

.van-hairline-left {
    color: black;
    border: none;
}

.van-hairline-right {
    color: white;
    background-color: #21d36e;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 180px;
    height: 120px;
    background-color: #fff;
    border-radius: 5%;
    font-size: 18px;

}

.block p {
    margin: auto;
    margin-top: 10px;
    text-align: center;
    color: black
}

.block .van-button {
    border: none;

}

.block .van-button1 {
    margin-top: 10px;
    margin-left: 20px;
    width: 60px;
    height: 30px;
    color: black;
    border: 1px solid black;
    display: inline-block;
    margin-top: 30px;
}

.block .van-button1:hover {
    background-color: #21d36e;
    color: white;
}

.block .van-button2:hover {
    background-color: red;
    color: white;
}

.block .van-button2 {
    margin-top: 10px;
    margin-left: 20px;
    width: 60px;
    height: 30px;
    color: black;
    border: 1px solid black;
    display: inline-block;
    margin-top: 30px;
}

.preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}

.field {
    border-top: 1px solid #ccc;
    /* 你可以根据需要调整颜色和宽度 */
    border-bottom: 1px solid #ccc;
    box-shadow:
        /* 上边框阴影 */
        inset 0 -2px 4px -2px rgba(0, 0, 0, 0.1),
        /* 下边框阴影，根据需要调整位置、模糊度和扩展值 */
        inset 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
</style>